// @flow
import React from 'react'
import { AgGridReact } from 'ag-grid-react'
import { TableResize } from 'ag-grid-addons'
import styles from './DeviceTypeBrowser.css'
import SyncKMX from 'components/SyncKMX'
// import { data } from './mock'
import { message } from 'antd'
import DeviceTypeSettings from './DeviceTypeSettings'
import Pagination from 'components/Pagination'

type Props = {
  history: Object,
  rowData: Array<Object>,
  refreshView: Function,
  deleteDevice: Function,
  total: number,
  current: number,
  pageSize: number
}

type States = {
  columnDefs: Array<Object>,
  kmxData: Array<Object>,
  syncKmxVisible: boolean
}
export default class DeviceTypeBrowser extends React.Component {
  props: Props
  state: States
  gridOptions: Object
  api: Object
  onGridReady: Function
  TableResize: Function
  openSyncKmxModal: Function
  closeSyncKmxModal: Function
  constructor (props: Props) {
    super(props)
    this.state = {
      kmxData: [],
      syncKmxVisible: false,
      columnDefs: [
        {
          headerName: '名称',
          field: 'name',
          cellRenderer: 'group',
          cellRendererParams: {
            // checkbox: true,
            innerRenderer:  (params) => {
              return params.data.name
            }
          },
          cellStyle: {
            'padding': '8px',
            'font-style': 'normal'
          }
        },
        {
          headerName: '型号',
          field: 'spec',
          cellStyle: {
            'text-align': 'center',
            'padding': '8px',
            'font-style': 'normal'
          }
        },
        {
          headerName: '类型',
          field: 'type',
          cellStyle: {
            'text-align': 'center',
            'padding': '8px',
            'font-style': 'normal'
          }
        },
        {
          headerName: '操作',
          cellStyle: {
            'text-align': 'center',
            'padding': '8px',
            'font-style': 'normal'
          },
          cellRendererParams: {
            rowData: this.props.rowData,
            history: this.props.history,
            refreshView: this.props.refreshView,
            deleteDevice: this.props.deleteDevice
          },
          cellRendererFramework: DeviceTypeSettings
        }
      ]
    }
    this.gridOptions = {
      localeText: {
        loadingOoo: '数据加载中...',
        noRowsToShow: '暂无数据',
        filterOoo: '搜索当前页面',
        equals: '等于',
        notEqual: '不等于',
        contains: '包含',
        startsWith: '开始于',
        endsWith: '结束于',
        copy: '复制',
        paste: '粘贴',
        copyWithHeaders: '带表头复制',
        toolPanel: '工具栏',
        export: '导出',
        csvExport: '导出CSV',
        excelExport: '导出Excel'
      },
      enableSorting: true,
      enableFilter: true,
      pagination: false,
      // animateRows: true,
      rowSelection: 'multiple',
      enableColResize: true,
      // groupSelectsChildren: true,
      // suppressCopyRowsToClipboard: true,
      icons: {
        groupExpanded: '<i class="fa fa-minus-square-o" aria-hidden="true"></i>',
        groupContracted: '<i class="fa fa-plus-square-o" aria-hidden="true"></i>'
      },
      onModelUpdated: () => {
        if (this.api) {
          this.api.sizeColumnsToFit()
          this.TableResize()
        }
      },
      getNodeChildDetails: (node: Object) => {
        // console.log(node)
        if (node.children.length > 0) {
          return {
            group: true,
            children: node.children
          }
        } else {
          return null
        }
      }
    }
    this.onGridReady = this.onGridReady.bind(this)
    this.TableResize = TableResize.bind(this)
    this.openSyncKmxModal = this.openSyncKmxModal.bind(this)
    this.closeSyncKmxModal = this.closeSyncKmxModal.bind(this)
  }

  onGridReady (params: Object) {
    this.api = params.api
    this.api.sizeColumnsToFit()
    this.TableResize()
  }
  openSyncKmxModal () {
    let kmxData = this.gridOptions.api.getSelectedRows()
    if (kmxData.length > 0) {
      this.setState({
        kmxData,
        syncKmxVisible: true
      })
    } else {
      message.info('请选择至少一条元数据')
    }
  }
  closeSyncKmxModal () {
    this.setState({
      syncKmxVisible: false
    })
  }
  render () {
    const { columnDefs, syncKmxVisible, kmxData } = this.state
    const { rowData, current, pageSize, total, refreshMaintenances } = this.props
    return (
      <div
        className={styles['main'] + ' ag-fresh'}
      >
        {
          // <Button className={styles['synkmxBtn']} onClick={this.openSyncKmxModal}>
          //   同步选中设置
          // </Button>
        }
        <AgGridReact {...{
          gridOptions: this.gridOptions,
          rowHeight: '34',
          headerHeight: '28',
          columnDefs: columnDefs,
          rowData: rowData,
          onGridReady: this.onGridReady
        }}
          />
        <Pagination current={current} pageSize={pageSize} total={total} onChange={refreshMaintenances} />
        <SyncKMX
          {...{
            kmxData,
            visible: syncKmxVisible,
            closeModal: this.closeSyncKmxModal
          }}
          />
      </div>
    )
  }
}
